<template>
    <div class="login-container">
        <el-card class="login-card" shadow="hover">
            <template #header>
            <div class="card-header">
                <h2>增加余额</h2>
            </div>
            </template>
            <el-form ref="loginForm":model="form" :rules="rules" label-width="120px" label-position="top" @submit.prevent="handleLogin">
            <el-form-item label="增加的余额" prop="values">
                <el-input-number v-model="form.values" :min="0.0" :precision="2" :step="0.01" controls-position="right"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" native-type="submit" class="login-btn" >
                {{ loading ? '增加中...' : '立即增加' }}
                </el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    import * as contract from '../../test/Truffle-ABI.js';
    import { useStore } from 'vuex';
    
    const router = useRouter();
    const loginForm = ref(null);
    const loading = ref(false);
    const web3Initialized = ref(false);
    const store = useStore();
    
    const form = reactive({
        uid:store.state.user.uid,
        values:''
    });
  
    const rules = {
        values: [
            { required: true, message: '破解版想要多少就给多少', trigger: 'blur' }
        ]
    };
  
    onMounted(async () => {
        try {
            await contract.initWeb3();
            web3Initialized.value = true;
        } catch (error) {
            ElMessage.error(`Web3初始化失败: ${error.message}`);
        }
    });
    
    const handleLogin = async () => {
        try {
            await contract.userIncrement(form.uid,form.values*100)
            ElMessage.success(`余额增加成功喵！正在返回首页喵`)
            const info = await contract.getUser(store.state.user.name);
            const user =reactive({
                name: info.name,
                uid: info.uid,
                values: info.values
            });
            //存储用户信息到Vuex
            store.commit('userinit',user);
            store.commit('setTxt','首页')
            router.push('/');
        } catch (error) {
        ElMessage.error('余额增加失败')
        } finally {
        loading.value = false;
        }
    };
</script>
  
<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 90vh;
        padding: 20px; 
        box-sizing: border-box;
    }

    .login-card {
        width: 480px;
        border-radius: 8px;
        margin: auto; 
        transform: translateY(-10%);
    }
    .card-header {
        text-align: center;
    }
    
    .login-btn {
        width: 100%;
        margin-top: 20px;
    }
    
    .register-link {
        text-align: center;
        margin-top: 20px;
        color: #606266;
    }
    
    .el-link {
        margin-left: 5px;
    }

    .login-container {
        background: url('../assets/椎名真白.png') no-repeat center center fixed;
        background-size: cover;
        position: relative;
    }

    .login-card {
        position: relative;
        z-index: 2; /* 确保卡片在遮罩层之上 */
    }
</style>